<style lang="less">
    html,body{
        height: 100%;
        overflow: hidden;
        background: #000 !important;
    }
    .page {
        margin: 100px auto;
        width: 600px;
    }

    .table-flex {
        width: 100%;
        display: block;

        tr {
            width: 100%;
            display: flex;

            th {
                flex: 1;
            }
        }
    }
</style>
<template>
    <div class="page">
        <x-scroll-table
                style="margin-top: 10px"
                row-key="id"
                :itemSize="22"
                :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,width:50}"
                :columns="columns"
                :dataSource="data">
            <template slot="action" slot-scope="{record,text}">
                <a @click="handleDetail(record)">详情</a>
            </template>
        </x-scroll-table>
    </div>
</template>
<script>
    import data from "./data/data";
    import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
    import infiniteScroll from 'vue-infinite-scroll';
    import {RecycleScroller} from 'vue-virtual-scroller';
    import XScrollTable from "./components/XScrollTable";
    import {handleBlankWord} from "./utils/util";

    const columns = [
        {
            title: 'name',
            key: 'name',
            dataIndex: 'name',
            customRender: (t, r, index, key) => {
                return parseInt(index) + 1
            },
            width: 50
        },
        {
            title: 'age',
            key: 'age',
            dataIndex: 'age',
            customRender: (t) => {
                return handleBlankWord(t)
            }
        },
        {
            title: 'address',
            key: 'address',
            dataIndex: 'address',
        },
        {
            title: 'operation',
            key: "operation",
            scopedSlots: {customRender: 'action'}
        },
    ];
    export default {
        directives: {infiniteScroll},
        components: {
            RecycleScroller,
            XScrollTable
        },
        mounted() {
            setTimeout(() => {
                console.log("修改数据")
                this.data = data
            }, 1000)
        },
        data() {
            return {
                selectedRowKeys: [1,2,100],
                columns,
                data: [],
                loading: false,
                busy: false,
                page: 1,
                pageSize: 10,
            };
        },
        methods: {
            handleDetail(record){
                console.log(record,"record")
            },
            onSelectChange(selectedRowKeys) {
                console.log(selectedRowKeys,"selectedRowKeys")
                this.selectedRowKeys = selectedRowKeys
            }
        }
    };
</script>
